<template>
	<view class="content">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular indicator-dots autoplay>
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-04/29c7d585-4981-4797-afab-0ab4c48015777133182357047920631.jpg">
					</image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-04/19435ad3-b2cc-43fe-8a99-713de06730a94914655788104521829.jpg">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view class="grid">
			<div class="gridTop">
				<view class="gridItem" @click="()=>onClickLogo(1)">
					<image src="../../static/activity/reser2.svg" alt=""></image>
					<text>预约</text>
				</view>
				<view class="gridItem" @click="()=>onClickLogo(2)">
					<image src="../../static/activity/host2.svg" alt=""></image>
					<text>托管</text>
				</view>
				<view class="gridItem" @click="()=>onClickLogo(3)">
					<image src="../../static/activity/looks.svg" alt=""></image>
					<text>监控</text>
				</view>
			</div>
			<div class="gridBottom">
				<view class="gridItem" @click="onClickLogo(4)">
					<image src="../../static/activity/chat.svg" alt=""></image>
					<text>交流区</text>
				</view>
				<view class="gridItem" @click="onClickLogo(6)">
					<image src="../../static/activity/comp2.svg" alt=""></image>
					<text>公司</text>
				</view>
				<view class="gridItem" @click="onClickLogo(5)">
					<image src="../../static/activity/logo52.svg" alt=""></image>
					<text>科普</text>
				</view>
			</div>
		</view>

		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" class="pop" round>
			<view class="middle">
				<view class="showbox"  @click="chooseNext4">
					教育
				</view>
				<view class="showbox"  @click="chooseNext6">
					娱乐
				</view>
				<view class="showbox"  @click="chooseNext8">
					科研
				</view>
				<view class="showbox"  @click="chooseNext0">
					技术
				</view>
			</view>


		</uni-popup>
	</view>
</template>

<script>
	import {
		checkReserve,
		BroadcastMapList
	} from '../../request/api.js'
	export default {
		data() {
			return {
				type: 'center',
			}
		},
		//分享
		onShareTimeline() {
			return {
				path: "pages/activity/activity", //不设置默认当前页面
				title: "归园土地管理",
				imageUrl: "https://xingqiu-tuchuang-1256524210.cos.ap-shangha…23-02-02/ea369ef3-87b5-4756-b2fe-5ec5a46c2445.jpg" //不设置默认截取页面
			}
		},

		onShareAppMessage(res) {
			// return eventHandler接收到的分享参数
			return {
				title: '归园土地管理', // 分享名称
				path: 'pages/activity/activity', // 这里写你这个页面的路径
				imageUrl: '', //这个是显示的图片，不写就默认当前页面的截图
				success(shareTickets) {
					console.log(shareTickets + '成功');
					uni.showToast({
						title: '提交成功',
						duration: 1500
					})
					// 转发成功
				},
				fail: function(res) {
					console.log(res + '失败');
					// 转发失败
				},
				complete: function(res) {
					// 不管成功失败都会执行
				}
			}
		},
		methods: {
			chooseNext4() {
				uni.setStorageSync('type', 1);
				// this.$refs.popup.open()
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			},
			chooseNext6() {
				uni.setStorageSync('type', 2);
				// this.$refs.popup.open()
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			},
			chooseNext8() {
				uni.setStorageSync('type', 3);
				// this.$refs.popup.open()
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			},
			chooseNext0() {
				uni.setStorageSync('type', 4);
				// this.$refs.popup.open()
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open()
			},
			checktoken() {
				const token = uni.getStorageSync('token')
				if (token == '') {
					uni.showToast({
						title: "请先登录",
						icon: "error"
					})
				}

			},
			onClickLogo(type) {
				switch (type) {
					case 1:
						const token = uni.getStorageSync('token')
						if (token == '') {
							uni.showToast({
								title: "请先登录",
								icon: "error"
							})
						} else {
							uni.showToast({
								title: "请先选择土地类型",
								icon: "none"
							})
							this.$refs.popup.open()
							// uni.navigateTo({
							// 	url: '/pages/reservation/reservation'
							// })
						}
						break
					case 2:
						checkReserve().then(res => {
							if (res.data.data.length > 0) {
								uni.navigateTo({
									url: '/pages/addHostLand/addHostLand'
								})
							} else {
								uni.showModal({
									title: '提示',
									content: '请先认养土地',
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/reservation/reservation',
												fail(error) {
													console.log(error)
												}
											})
										} else if (res.cancel) {

										}
									}
								});
							}



						})

						break
					case 3:
						checkReserve().then(res => {
							const token = uni.getStorageSync('token')
							if (token == '') {
								uni.showToast({
									title: "请先登录",
									icon: "error"
								})
							} else {
								uni.showToast({
									title: "功能还未上线",
									icon: "none"
								})
								// console.log(res);
								// uni.navigateTo({
								// 	url: '/pages/monitor/monitor'
								// })
							}


						})

						break
					case 4:
						checkReserve().then(res => {
							const token = uni.getStorageSync('token')
							if (token == '') {
								uni.showToast({
									title: "请先登录",
									icon: "error"
								})
							} else {
								console.log(res);
								uni.navigateTo({
									url: '/pages/mychat/mychat'
								})
							}


						})

						break
					case 5:
						checkReserve().then(res => {
							const token = uni.getStorageSync('token')
							if (token == '') {
								uni.showToast({
									title: "请先登录",
									icon: "error"
								})
							} else {
								console.log(res);
								uni.navigateTo({
									url: '/pages/science/science'
								})
							}


						})

						break
					case 6:
						checkReserve().then(res => {
							const token = uni.getStorageSync('token')
							if (token == '') {
								uni.showToast({
									title: "请先登录",
									icon: "error"
								})
							} else {
								console.log(res);
								uni.navigateTo({
									url: '../company/company'
								})
							}


						})

						break
				}
			}

		}

	}
</script>

<style lang="less">
	.content {

		width: 100%;
		height: 100vh;
		background-color: rgb(242, 242, 242);

		.swiper {
			width: 100%;
			height: 220px;
			margin: 0 0px 0 0px;
			border: 0;
		}

		.swiperitem image {
			width: 100%;
			height: 100%;
			margin: 0 0px 0 0px;
			border-radius: 20px;
		}
	}

	@keyframes appear {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.grid {
		width: 90vw;
		margin-left: 5vw;
		margin-right: 5vw;
		margin-top: 30vh;
		transform: translate(0, -25%);
		background-color: #fff;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		border-radius: 10px;
		animation: appear 2s ease 0s 1 normal forwards;

		.gridTop {
			display: flex;
			justify-content: space-around;
		}

		.gridBottom {
			display: flex;
			justify-content: space-around;
			margin-top: 50rpx;
		}

		.gridItem {
			text-align: center;
			width: 25vw;
			height: 25vw;
			margin: 20rpx;

			image {
				width: 23vw;
				height: 13vw;
			}

			text {
				font-size: 1.1em;
				font-family: "微软雅黑", monospace;
				font-weight: 500;
			}
		}
	}


	.pop {
		width: 50vw;
		height: 100vh;
		border-radius: 20px;
	}

	.contenttext {
		width: 60vw;
		height: 50vh;
		margin: 5% auto 0;

		.choose {
			text-align: center;
			font-size: 18px;
		}

		.write {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(68, 212, 183, 1) 0%, rgba(48, 184, 156, 1) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 0 auto 5%;
			margin-top: 5%;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}

		.ask {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(84, 172, 212, 1.0) 0%, rgba(61, 137, 184, 1.0) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 0 auto;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}

		.ask2 {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(80, 94, 212, 1.0) 0%, rgba(51, 68, 166, 1.0) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 5% auto 5%;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}

		.ask3 {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-weight: 800;
			font-size: 35rpx;
			background: linear-gradient(130.4deg, rgba(118, 80, 212, 1.0) 0%, rgba(89, 60, 184, 1.0) 100%);
			border-radius: 20px;
			text-align: center;
			margin: 0 auto;
			color: aliceblue;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}
	}

	@keyframes appear {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.title {
		width: 80vw;
		height: 10vh;
	}

	.middle {
		width: 80vw;
		height: 40vh;
		background-color: #fff;
		margin: 7% auto 5%;
		border-radius: 10px;
		padding: 20px 10px;
		display: grid;
		grid-template-columns: repeat(2, 40%);
		/* 声明行间距和列间距 */
		grid-gap: 0 20px;
		/* 分别表示两行的高度 */
		align-items: center;
		justify-content: center;
		// align-content:center;
		align-self: center;
		box-sizing: border-box;
		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
		animation: appear 2s ease 0s 1 normal forwards;

		.showbox {
			text-align: center;
			background-color: #e6f0d7;
			height: 8vh;
			line-height: 8vh;

			box-sizing: border-box;
			border-radius: 10px;
			font-size: 22px;
			color: #4095E5;

		}
	}
</style>
